<template>
    <div>
        <KForm :model="model" :rules="rules" ref="loginForm">
            <k-form-item label="用户名：" prop="username">
                <k-input
                    v-model="model.username"
                    placeholder="请输入用户名"
                ></k-input>
            </k-form-item>
            <k-form-item label="密码：" prop="password">
                <k-input
                    v-model="model.password"
                    placeholder="请输入密码"
                ></k-input>
            </k-form-item>
            <k-form-item>
                <button @click="onLogin">登录</button>
            </k-form-item>
        </KForm>
    </div>
</template>

<script>
import KInput from './KInput.vue';
import KFormItem from './KFormItem.vue';
import KForm from './KForm.vue';
export default {
    components: {
        KInput,
        KFormItem,
        KForm,
    },
    data() {
        return {
            name: 'jack',
            model: {
                username: 'tom',
                password: '',
            },
            rules: {
                username: [{ required: true, message: '用户名为必填项' }],
                password: [{ required: true, message: '密码为必填项' }],
            },
        };
    },
    methods: {
        onLogin() {
            this.$refs.loginForm.validate((valid) => {
                if (valid) {
                    console.log('login');
                } else {
                    this.$create(Notice, {
                        title: '哈喽',
                        message: '提示',
                        duration: 1000,
                    }).show();
                }
            });
        },
    },
};
</script>

<style lang="scss" scoped></style>
